import React from 'react';
import { Icon } from 'antd-mobile';
import styles from './categoryNav.css';

const signUpIcon = require('../../../../../icons/partTime/nearby.png');
const admissionIcon = require('../../../../../icons/partTime/shipping.png');
const workIcon = require('../../../../../icons/partTime/network.png');
const settlementIcon = require('../../../../../icons/partTime/weekend.png');

const CategoryNav = ({
  onViewClick=()=>{},
}) => {
  const a = 1.2;
  const tabsList = [{
    id:1,
    label:'附近兼职',
    imgUrl:signUpIcon,
    indexNum:1
  },{
    id:2,
    label:'急招兼职',
    imgUrl:admissionIcon,
    indexNum:2
  },{
    id:3,
    label:'在家兼职',
    imgUrl:workIcon,
    indexNum:3
  },{
    id:4,
    label:'周末兼职',
    imgUrl:settlementIcon,
    indexNum:4
  }]

  return(
    <div className={styles.categoryNavBody}>

      <div className={styles.partTimeTabs}>
        {tabsList.map((item, index) => {
          return (
            <div
              key={item.id.toString()}
              className={styles.tabItem}
              onClick={() => onViewClick(item)}
              >
              <img src={item.imgUrl}/>
              <span>{item.label}</span>
            </div>
          )
        })}
      </div>

    </div>
  )
}

export default CategoryNav;
